import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, } from '@tarojs/components';
import { Field, Popup, Button, Toast } from '@antmjs/vantui';
import { submitFundFeedback } from '@/services/api/fund';
import './index.scss'

interface FundFeedbackPopupProps {
    showPopUP: boolean;
    onClose: Function;
    onSubmit: Function;
}


class FundFeedbackPopup extends Component<FundFeedbackPopupProps, any> {

    state = {
        showPopUP:false,
        buttonDisabled:true,
        searchText:'',
        focus:true,
    }

    onClose() {
        this.setState({ showPopUP: false });
        const { onClose } = this.props;
        onClose();
    }

    onSubmit() {
        this.setState({ showPopUP: false });
        const { onSubmit } = this.props;
        onSubmit();
    }

    constructor(props: FundFeedbackPopupProps) {
        super(props);
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const { showPopUP } = nextProps;
        this.setState({showPopUP: showPopUP})
    }

    componentWillMount() { 
        this.setState({ buttonDisabled: true });
    }
    componentDidMount() { }
    componentWillUnmount() { }

    /**
     * 文本变化
     */
    fieldTextChange(e) {
        this.setState({ searchText: e.detail })
        if (e.detail.length > 0) {
            this.setState({ buttonDisabled: false })
        } else {
            this.setState({ buttonDisabled: true })
        }
    }
    
    /**
     * 提交反馈
     * @returns 
     */
    sendFeedBack() {
        const { searchText } = this.state
        if (searchText.length <= 0) {
            Toast.show('请输入内容');
            return
        }
        var feedback_type = 1;
        var fund_code = '';
        var fund_name = searchText;
        submitFundFeedback({ feedback_type, fund_code, fund_name }).then((resp) => {
            if(resp.code === 200){
                Toast.show('反馈成功')
                this.onSubmit()
            }
            this.setState({focus:false,})
        });
    }

    render() {
        const { showPopUP, buttonDisabled,focus } = this.state
        const {safeArea } = Taro.getSystemInfoSync()
        return (
            <Popup  show={showPopUP} position='bottom' onClose={this.onClose.bind(this)}>
                <Text className='tip'>向我们反馈</Text>
                <Text>发送你想要的基金名称或编号，我们会尽快将基金产品数据收录至系统</Text>
                <Field
                    center
                    clearable
                    focus={focus}
                    cursorSpacing={80}
                    placeholder="请基金名称或备案编号"
                    border
                    renderButton={
                        <Button className='send-button' disabled={buttonDisabled} onClick={this.sendFeedBack.bind(this)}>
                            发送
                        </Button>
                    }
                    onChange={(e) => this.fieldTextChange(e)}
                    style={{ marginBottom:safeArea.top}}
                />
            </Popup>
        );
    }
}

export default FundFeedbackPopup;